<template>
  <div class="home">
    <swiper :options="swiperOptions">
      <swiper-slide>
        <img class="w-100" src="../../assets/images/lbt1.jpg" alt="1" />
      </swiper-slide>
      <swiper-slide>
        <img
          class="w-100"
          src="../../assets/images/edcc926fc132d135710b4d0753309621.jpeg"
          alt="1"
        />
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../../assets/images/lbt1.jpg" alt="1" />
      </swiper-slide>
      <div
        class="swiper-pagination pagination-home text-right px-3 pb-1"
        slot="pagination"
      ></div>
    </swiper>

    <!-- end of swiper -->

    <div class="nav-icons bg-white text-dark-1 mt-3 pt-3 text-center">
      <div class="d-flex flex-wrap" :class="{ open: !isShow }">
        <div class="nav-item mb-3" v-for="n in 10" :key="n">
          <i class="sprite sprite-news"></i>
          <div class="py-2">爆料站</div>
        </div>
      </div>
      <div class="bg-light py-2 fs-sm">
        <i class="sprite sprite-arrow mr-1"></i>
        <span @click="Show()" class="btm">收起</span>
      </div>
    </div>

    <!-- end of nav icons -->

    <list-card icon="menu1" title="新闻资讯" :categories="newsData">
      <template #items="{ category }">
        <!-- 
          router-link 默认显示a标签，tag指定显示为div标签（具有点击跳转功能）
          to 跳转链接
        -->
        <router-link
          tag="div"
          :to="`/articles/${news._id}`"
          class="py-2 fs-lg d-flex"
          v-for="(news, i) in category.newsList"
          :key="i"
        >
          <span class="text-info">[{{ news.categoryName }}]</span>
          <span class="px-2">|</span>
          <span class="flex-1 text-dark-1 text-ellipse pr-2">{{
            news.title
          }}</span>
          <span class="text-grey-1 fs-sm">{{ news.createdAt | date }}</span>
        </router-link>
      </template>
    </list-card>

    <!-- heroList -->
    <list-card icon="card-hero" title="英雄列表" :categories="heroData">
      <template #items="{ category }">
        <div class="d-flex flex-wrap" style="margin: 0 0.05rem">
          <router-link
            tag="div"
            :to="`/heroes/${hero._id}`"
            class="p-2 text-center"
            style="width: 20%"
            v-for="(hero, i) in category.heroList"
            :key="i"
          >
            <img :src="hero.avatar" class="w-100" />
            <div>{{ hero.name }}</div>
          </router-link>
        </div>
      </template>
    </list-card>

    <!-- videolist -->
    <list-card icon="menu1" title="精彩视频" :categories="videoData">
      <template #items="{ category }">
        <div class="d-flex flex-wrap" style="margin: 0 0.05rem;min-height:20rem">
          <router-link
            tag="div"
            :to="`/`"
            class="p-1 text-grey"
            style="width: 50%"
            v-for="(video, i) in category.videoList"
            :key="i"
          >
            <img :src="video.image" class="w-100" style="height:7.5rem;" />
            <div
              class="w-100 fs-md text-ellipses"
              style="height: 3rem; line-height: 1.5rem"
            >
              {{ video.name }}
            </div>
            <div class="after d-flex flex-wrap jc-between px-1 py-2">
              <i class="iconfont icon-menu1" style="font-size:0.6154rem;">
                <span class="ml-1">0</span>
              </i>
              <div class="text-grey-1 fs-sm">{{ (video.createdAt?video.createdAt:video.updatedAt) | date }}</div>
            </div>
          </router-link>
        </div>
        <div class="border-bottom p-1"></div>
        <div class="text-center text-grey-1 pt-2 fs-md">加载更多内容</div>
      </template>
    </list-card>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  // 过滤器
  filters: {
    // 时间过滤
    date(val) {
      return dayjs(val).format("MM/DD");
    },
  },
  data() {
    return {
      // 轮播图pagination样式
      swiperOptions: {
        pagination: {
          el: ".pagination-home",
        },
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        // 循环
        loop: true,
        autoplay: {
          delay: 1500,
          disableOnInteraction: false,
        },
      },
      // 新闻数据
      newsData: [],
      // 英雄数据
      heroData: [],
      // 视频数据
      videoData: [],
      isShow: false,
    };
  },
  created() {
    this.fetchNewsData();
    this.fetchHeroData();
    this.fetchVideoData();
  },
  methods: {
    Show() {
      console.log(222222222);
      this.isShow = !this.isShow;
    },
    async fetchNewsData() {
      const res = await this.$http.get("news/list");
      this.newsData = res.data;
    },
    async fetchHeroData() {
      const res = await this.$http.get("heroes/list");
      this.heroData = res.data;
    },
    async fetchVideoData() {
      const res = await this.$http.get("videos/list");
      this.videoData = res.data;
    },
  },
};
</script>

<style lang="scss">
@import "../../assets/scss/_variable.scss";
.pagination-home {
  // 根据模块本身定义的类名来定义
  .swiper-pagination-bullet {
    opacity: 1;
    border-radius: 0.1538rem;
    background: map-get($colors, "white");
    &.swiper-pagination-bullet-active {
      background: map-get($colors, "info");
    }
  }
}

.nav-icons {
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  .nav-item {
    width: 25%;
    border-right: 1px solid $border-color;
    &:nth-child(4n) {
      border-right: none;
    }
  }
}
</style>
